<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .a{
            display: flex;
            flex-direction: column;
            justify-self: center;
            align-items: center;
            height: 200px;
            width: 100%;
        }
        .a div{
            flex: 1;
        }
        .a1{
            font-size: 50px;
        }
        .b{
            background-color: aqua;
            width: 225px;
            flex: 0.5;
        }
        .a2 {
            margin-right: 32px;
        }
        .a3{
            margin-right: 16px;
        }
        .bb{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <div class="a">
        <div class="a1">表白墙</div>
        <div >
            <span class="a2">谁</span><input type="text" class="a21">
        </div>
        <div>
            <span class="a3">对谁</span><input type="text" class="a31">
        </div>
        <div>
            <span class="a4">说什么</span><input type="text" class="a41">
        </div>
        <button class="b">提交</button>
    </div>
    <div class="bb">

    </div>
    <script>
        let bb=document.querySelector('.bb')
        let b=document.querySelector('.b')
        b.onclick=function(){
            let input=document.querySelectorAll('input')
            let from=input[0].value
            let to=input[1].value
            let words=input[2].value
            let bbb=document.createElement('div')
            bbb.className='bbb'
            bbb.innerHTML=from+'对'+to+'说'+words
            bb.appendChild(bbb)
            for(i=0;i<input.length;i++){
                input[i].value=''
            }
            let data={
                from,
                to,
                words
            }
            $.ajax({
                type: 'post',
                url: 'hello',
                data:JSON.stringify(data),
                contentType:"application/json; charset=utf8"
            })
        }
        function getmassage(){
            $.ajax({
                type:'get',
                url:'hello',
                success:function(body){
                    let bb=document.querySelector('.bb')
                    for(i=0;i<body.length;i++){
                        let bbb=document.createElement('div')
                        bbb.className='bbb'
                        bbb.innerHTML=body[i].from+'对'+body[i].to+'说'+body[i].words
                        bb.appendChild(bbb)
                    }
                }
            })
        }
        getmassage();
    </script>
</body>
</html>